<template>
  <div class="wel-wrapper">
    <!-- <basic-container>
    </basic-container> -->
    <div class="wel-left-block wrapper-item border4-top">
      <div class="wel-header">
        <span>快捷入口</span>
        <!-- <el-tooltip class="item" effect="dark" content="“快捷入口”自定义方法（仅限管理员操作）：在【权限管理】-【菜单管理】中，选择需要增加快捷入口的菜单名称，点击【修改】按钮，将【快捷入口】设置修改为“是”" placement="right">
          <span style="cursor:pointer">快捷入口<i class="el-icon-question"></i></span>
        </el-tooltip> -->
        <el-tooltip class="item" effect="dark" content="自定义快捷入口显示模块" placement="right" >
           <i class="el-icon-edit" @click="showDialog" style="float: right;font-size: 24px;margin-top: 10px;margin-right:10px;cursor: pointer;"></i>
        </el-tooltip>
      </div>
      <div class="wel-left-content">
        <div class="wel-left-top">
           <div class="content-item" v-for="(item, index) in quickList" v-if="item.isChecked" :key="index" :style="{'background-image': 'url(/img/quick/' + item.quickIcon + ')'}"  @click="goDetail(item)">
            <i :class="item.icon"></i>
            <span>{{item.name}}</span>
          </div>
        </div>
        <!-- <div class="wel-left-top">
          <div class="content-item" @click="goDetail('/officegoods/oaofficegoodsapplybill/index')" style="background-image: url(&quot;/img/quick/navy.png&quot;);">
            <i class="icon-officegoodsgoods"></i>
            <span>办公用品领用</span>
          </div>
          <div class="content-item" @click="goDetail('/car/oacarbill/index')" style="background-image: url(&quot;/img/quick/orange.png&quot;);">
            <i class="icon-car"></i>
            <span>公务用车申请</span>
          </div>
          <div class="content-item" @click="goDetail('/housing/oahousingbill/index')" style="background-image: url(&quot;/img/quick/purple.png&quot;);">
            <i class="icon-housing"></i>
            <span>住房申请</span>
          </div>
          <div class="content-item" @click="goDetail('/repair/oarepairbill/index')" style="background-image: url(&quot;/img/quick/blue.png&quot;);">
            <i class="icon-server"></i>
            <span>维修申请</span>
          </div>
          <div class="content-item" @click="goDetail('/asset/my/index')" style="background-image: url(&quot;/img/quick/red.png&quot;);">
            <i class="icon-server"></i>
            <span>我的资产</span>
          </div>
          <div class="content-item" @click="goDetail('/drug/oadrugbill/index')" style="background-image: url(&quot;/img/quick/green.png&quot;);">
            <i class="icon-wenjianguanli"></i>
            <span>药品申请</span>
          </div>
          <div class="content-item" @click="goDetail('/salon/reserve/index')" style="background-image: url(&quot;/img/quick/navy.png&quot;);">
            <i class="icon-salon"></i>
            <span>理发预约</span>
          </div>
          <div class="content-item" @click="goDetail('/parking/oaparkingbill/index')" style="background-image: url(&quot;/img/quick/orange.png&quot;);">
            <i class="icon-access"></i>
            <span>停车申请</span>
          </div>
        </div> -->
        <div class="wel-left-bottom">
          <img class="text-img" src="/img/text1.png" alt="">
          <img class="people-img" src="/img/people.png" alt="">
          <img class="text-img" src="/img/text2.png" alt="">
        </div>
      </div>
    </div>
    <div class="wel-right-block wrapper-item">
      <div class="wel-right-top">
        <div class="wel-header">
          后勤动态<span class="more-jump" @click="goNewList">更多 ></span>
        </div>
        <div class="right-top-content">
          <el-carousel arrow="always" :autoplay="true">
            <el-carousel-item v-for="item in bannerList" :key="item.id">
              <img :src="item.banner"
                   alt="" @click="liClick(item)">
              <!-- <div class="shadow-block"  @click="liClick(item)">
                <div class="shadow-text" :title="item.subTitle">
                  {{item.subTitle}}
                </div>
              </div> -->
              <span :title="item.title">{{item.title}}</span>
            </el-carousel-item>
          </el-carousel>
          <!-- <ul class="right-top-ul">
            <li v-for="(item, index) in newList" :key="item.id" v-if="index<7"  @click="liClick(item)">
              <span>{{item.title}}</span>
            </li>
          </ul> -->
        </div>
      </div>
      <div class="wel-right-middle">
        <div class="wel-header">
          常用功能
        </div>
        <div class="right-middle-content">
          <div class="content-item" v-for="(item, index) in linkList" :key="index" @click="golink(index)" :style="{'background-image': 'url(' + item.banner + ')'}">
            <!-- <a :href="item.url"  target="_blank"></a> -->
          </div>
        </div>
      </div>
      <div class="wel-right-bottom">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane name="first">
            <!-- <el-badge :value="mesTotal" v-if="mesTotal != 0" class="item" slot="label">
              最新消息
            </el-badge> -->
            <span  class="item" slot="label">
              最新消息
            </span>
            <div class="item-list" v-for="item in msgList" :key="item.id" @click="openDialog(item)">
              <div class="item-list-left" :style="{background: item.bg ? 'url(/img/message/' + item.bg + ')' : 'url(/img/message/green.png)'}">
                <i :class="item.icon ? item.icon : 'icon-gongzhonghao'"></i>
              </div>
              <div class="item-list-right">
                <p class="first-p">{{item.sendDate}}</p>
                <p class="second-p" v-html="item.msgTitle"></p>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane name="second">
            <el-badge :value="total" v-if="total != 0" class="item" slot="label">
              待办
            </el-badge>
            <span  v-else class="item" slot="label">
              待办
            </span>
            <div class="item-list" v-for="item in tableDataTo" :key="item.id" @click="openDbDetail(item)">
              <div class="item-list-left" :style="{background: item.bg ? 'url(/img/message/' + item.bg + ')' : 'url(/img/message/green.png)'}">
                <i :class="item.icon ? item.icon : 'icon-gongzhonghao'"></i>
              </div>
              <div class="item-list-right">
                <p class="first-p">{{item.createTime}}</p>
                <p class="second-p" v-html="item.title"></p>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="已办" name="third"> 
            <div class="item-list" v-for="item in tableDataDone" :key="item.id" @click="openDbDetail(item)">
              <div class="item-list-left" :style="{background: item.bg ? 'url(/img/message/' + item.bg + ')' : 'url(/img/message/green.png)'}">
                <i :class="item.icon ? item.icon : 'icon-gongzhonghao'"></i>
              </div>
              <div class="item-list-right">
                <p class="first-p">{{item.createTime}}</p>
                <p class="second-p" v-html="item.title"></p>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="我提交的" name="four"> 
            <div class="item-list" v-for="item in tableDataMy" :key="item.id" @click="openDbDetail(item)">
              <div class="item-list-left" :style="{background: item.bg ? 'url(/img/message/' + item.bg + ')' : 'url(/img/message/green.png)'}">
                <i :class="item.icon ? item.icon : 'icon-gongzhonghao'"></i>
              </div>
              <div class="item-list-right">
                <p class="first-p">{{item.createTime}}</p>
                <p class="second-p" v-html="item.title"></p>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
        <span class="more-jump" @click="goThreePage">更多 ></span>
        <el-dialog append-to-body title="消息内容" :visible.sync="modal">
          <div>{{diaObj.diclabel}}</div>
          <div style="margin-bottom: 15px;">发布人：{{diaObj.sendUserName}}&nbsp;&nbsp;&nbsp;发布时间：{{diaObj.sendDate}}</div>
          <div style="margin-left: -5px;" v-html="diaObj.msgContent"></div>
        </el-dialog>
      </div>
    </div>
    <el-dialog append-to-body title="联系方式" border :visible.sync="lxmodal" top="4vh" width="1200px">
       <el-table
        :data="tableDatalx"
        style="width: 100%">
        <el-table-column
          type="index"
          label="序号"
          align="center"
          width="50">
        </el-table-column>
        <el-table-column
          prop="departTypeName"
          align="center"
          label="科组">
        </el-table-column>
        <el-table-column
          prop="jobDesc"
          label="主要职责"
          width="600">
        </el-table-column>
        <el-table-column
          prop="contacts"
          label="联系人">
           <template slot-scope="scope">
            {{scope.row.contacts}} ({{scope.row.phone}})
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <el-dialog append-to-body title="快捷入口展示设置" border :visible.sync="modal1" v-if="modal1" top="10vh" width="800px">
       <el-table
        :data="tableDataSz"
        style="width: 100%">
        <el-table-column
          prop="name"
          label="快捷入口"
          align="left">
        </el-table-column>
        <el-table-column
          align="center"
          label="是否展示">
          <template slot-scope="scope">
            <el-checkbox v-model="scope.row.isyes"></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column
          prop="customerSort"
          label="排序"
          align="center"
          width="300">
          <template slot-scope="scope">
            <!-- <el-input-number v-model="scope.row.customerSort"></el-input-number> -->
            <!-- <el-input-number v-model="scope.row.customerSort" :min="1" :max="20" @change="changePort($event, scope.row)"></el-input-number> -->
            <el-input-number v-model="scope.row.customerSort" :min="1" :max="20"></el-input-number>
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="modal1 = false">取 消</el-button>
        <el-button type="primary" @click="saveQuick">保存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getQuickObj } from '@/api/admin/menu'
import { fetchList } from '@/api/admin/syslink'
import { fetchList2 } from '@/api/admin/sysnews'
import { getSysmsginner, customize } from "@/api/admin/user"
import { remote } from "@/api/admin/dict"
import {findByvalue} from '@/util/util'
import {fetchList as fetchList3} from '@/api/act/commcontact'
import { billDone, billTo, allOwn } from '@/api/bill'
export default {
  name: 'Wel',
  data() {
    return {
      lxmodal: false,
      curveColorList: [
        "#ed1299", "#09f9f5", "#246b93", "#cc8e12", 
        "#d561dd", "#c93f00", "#ddd53e","#4aef7b", 
        "#e86502", "#9ed84e", "#39ba30", "#6ad157", 
        "#8249aa", "#99db27", "#e07233", "#ff523f",
        "#ce2523", "#f7aa5d", "#cebb10", "#03827f"
      ],
      tableDatalx: [
      ],
      tableDataSz: [],
      diaObj: {},
      total: '',
      mesTotal: '',
      tableDataTo: [],
      tableDataDone: [],
      tableDataMy: [],
      modal: false,
      modal1: false,
      activeName: 'first',
      bannerList: [],
      newList: [],
      msgList: [],
      dicList: [],
      dicList1: [],
      quickList: [],
      linkList: []
    }
  },
  watch: {
    unreadMessage(newVal, oldVal) {
      this.getDb()
      this.getMsgList()
    }
  },
  computed: {
     ...mapGetters(['tagList', 'unreadMessage']),
  },
  created() {
    remote('contact_depart_type').then(response => {
      this.dicList1 = response.data.data
      this.getLxfs()
    })
    this.getQuick()
    this.getLink()
    this.getNews()
    this.getDb()
    remote('module_type').then(response => {
      this.dicList = response.data.data
    })
  },
  methods: {
    showDialog() {
      this.tableDataSz = this.quickList.map(item => {
        return {
          menuId: item.menuId,
          name: item.name,
          customerSort: item.customerSort,
          isyes: item.isChecked? true: false
        }
      })
      this.modal1 = true
    },
    changePort(val, row) {
      let list = this.tableDataSz.filter(item => {
        return item.customerSort === val
      })
      if (list.length > 1) {
        this.$message.warning('已存在相同排序号，请修改')
        row.customerSort = null
      }
    },
    saveQuick() {
      let list = this.tableDataSz.map(item => {
        return {
          menuId: item.menuId,
          customerSort: item.customerSort,
          isChecked: item.isyes ? 1 : 0
        }
      })
      customize(list).then(res => {
        this.$message.success('保存成功')
        this.modal1 = false
        this.getQuick()
      })
    },
    getLxfs() {
      let _this = this
      fetchList3({size: -1}).then(response => {
        _this.tableDatalx = response.data.data.records.map(item => {
          item.departTypeName = findByvalue(_this.dicList1, item.departType)
          return item
        })
      })
    },
    getlxName(id) {
      let list =  this.dicList1.filter(item => {
          return item.dicList1 === id
      })
      return list.length > 0 ? list[0].name : ''
    },
    goDetail(item) {
      this.$router.push({
        path: item.path
        // path: item
      })
    },
    golink(index) {
      if (index === 0) {
        this.$router.push({
          // path: '/admin/zdhb/index'
          path: '/act/commdoc/index'
        })
      } else if (index === 1) {
        this.lxmodal = true
      } else {
        this.$router.push({
          path: '/act/oasuggestbill/index'
        })
      }
    },
    openDialog(row) {
      this.modal = true;
      // this.remak = row.msgContent;
      let dicvaluelist = this.dicList.filter(item => {
        return item.value === row.contentType
      })
      row.diclabel = dicvaluelist[0].label
      this.diaObj = row

      this.readMessage(row.id);
    },
    openDbDetail(row) {
      let tag = this.tagList.filter(item => {
          return item.value.indexOf('/db/detail') !== -1
      })
      if (tag.length > 0) {
          this.$router.$avueRouter.closeTag(tag[0])
      }
      this.$router.push({
          name: '流程详情',
          params: {
              id: row.billId,
              newtitle: '流程详情-' + row.flowName
          }
      })
    },
    readMessage(id) {
      readsysmsginner(id).then((res) => {
      });
    },
    getQuick() {
      getQuickObj().then(response => {
        this.quickList = response.data.data
        this.getMsgList()
      })
    },
    getDb() {
      billTo({
          current: 1,
          size: 10
      }).then(response => {
          this.tableDataTo = response.data.data.records
          this.tableDataTo.map(citem => {
            this.quickList.map(item => {
              if (item.icon.indexOf(citem.moduleType) !== -1) {
                citem.bg = item.quickIcon
                citem.icon = item.icon
                return
              }
            })
          })
          this.total = response.data.data.total
      })
      billDone({
          current: 1,
          size: 10
      }).then(response => {
          this.tableDataDone = response.data.data.records
          this.tableDataTo.map(citem => {
            this.quickList.map(item => {
              if (item.icon.indexOf(citem.moduleType) !== -1) {
                citem.bg = item.quickIcon
                citem.icon = item.icon
                return
              }
            })
          })
      })
      allOwn({
          current: 1,
          size: 10
      }).then(response => {
          this.tableDataMy = response.data.data.records
      })
    },
    goThreePage () {
      if (this.activeName === 'first') {
        this.$router.push({
          path: '/message/page'
        })
      } else if(this.activeName === 'second') {
        this.$router.push({
          name: '我的审批',
          params: {
            type: '1'
          }
        })
      } else if(this.activeName === 'third'){
        this.$router.push({
          name: '我的审批',
          params: {
            type: '2'
          }
        })
      } else {
        this.$router.push({
          name: '我的审批',
          params: {
            type: '3'
          }
        })
      }
    },
    handleClick() {
      
    },
    goNewList() {
      this.$router.push({
        path: '/admin/sysnews/yet/index',
      }) 
    },
    getMsgList() {
      let self = this
      getSysmsginner({current: 1,size: 8})
        .then((response) => {
          self.msgList = response.data.data.records;
          self.mesTotal = response.data.data.total
          self.msgList.map(citem => {
            self.quickList.map(item => {
              if (item.icon.indexOf(citem.contentType) !== -1) {
                citem.bg = item.quickIcon
                citem.icon = item.icon
                return
              }
            })
          })
        })
    },
    getNews() {
      fetchList2().then(response => {
        if (response.data.data.records.length > 0) {
          response.data.data.records.map(item => {
            if (item.showBanner === '1') {
              this.bannerList.push(item)
            } else {
              if (item.status === '3') {
                this.newList.push(item)
              }
            }
          })
        }
      })
    },
    liClick(item) {
      let tag = this.tagList.filter(item => {
        return item.value.indexOf('/detail/page') !== -1
      })
      if (tag.length > 0) {
        this.$router.$avueRouter.closeTag(tag[0])
      }
      this.$router.push({
        path: '/detail/page/' + item.id,
      }) 
    },
    getLink() {
      fetchList().then(response => {
        this.linkList = response.data.data.records
      })
    }
  }
}
</script>

<style lang="scss">
.avue--collapse{
  .wel-left-block{
    // width: calc(100vw - 170px - (220px / 9 * 16 + 40px));
    width: calc(100vw - 170px - (250px / 2 * 3 + 40px));
  }
}
.wel-left-block{
  // width: calc(100vw - 170px - (220px / 9 * 16 + 40px) - 140px);
  width: calc(100vw - 170px - (250px / 2 * 3 + 40px) - 140px);
}
.wel-wrapper{
  overflow: hidden;
  padding:20px;
  .wel-header{
    height: 50px;
    line-height:50px;
    color: #666;
    padding-left: 20px;
    border-bottom: 1px solid #deeaf3;
  }
  .more-jump{
    cursor: pointer;
    position: absolute;
    right: 20px;
    top: 13px;
    line-height: 1.5;
    color: #3b9cfe;
  }
  .wel-left-block{
    // width: calc((100vw - 160px)*0.7);
    // width: calc(100vw - 170px - (220px / 9 * 16 + 40px));
    background: #e9fbff;
    // background: #fff;
    border-radius: 4px;
    .wel-left-content{
      position: relative;
      padding-bottom: 20px;
      overflow-y: auto;
      height: calc(100vh - 150px);
      .wel-left-top{
        // display: inline-block;
        // padding: 0 20px;
        // display: flex;
        // flex-wrap: wrap;
        // align-content:space-between;
        // justify-content: space-around;
        // padding-left: 30px;
        padding-left: 50px;
        // margin-left: -2%;
        // margin: 0 auto;
        // text-align: center;
        // height: calc(100% - 96px);
        // height: 340px;
        // overflow: auto;
      }
      .wel-left-bottom{
        position: absolute;
        bottom: 0;
        text-align: center;
        padding: 0 30px 30px 30px;
        .people-img{
          display: inline-block;
          height: auto;
          vertical-align: bottom;
          width: 10%;
        }
      }
      .text-img{
        width: 40%;
        vertical-align: baseline;
      }
      .content-item{
        width: 260px;
        height: 150px;
        // flex-shrink: 0;
        // width: 31%;
        // height: calc((100vw - 160px)*0.65*0.31*0.5);
        display: inline-block;
        border-radius: 8px;
        // margin-left: calc((100% - 1040px)/5);
        margin-left: 3%;
        margin-top: 20px;
        text-align: center;
        color: #fff;
        cursor: pointer;
        font-size: 22px;
        font-weight: bold;
        background-size: 100% 100%;
        i {
          line-height: 1;
          display: block;
          font-size: 50px !important;
          margin-top: 30px;
          margin-bottom: 10px;
        }
      }
    }
  }
  .wel-right-block{
    // width: calc((100vw - 160px)*0.29);
    // width: calc(220px / 9 * 16 + 40px);
    width: calc(250px / 2 * 3 + 40px);
    margin-left: 20px;
    .wel-right-top{
      position: relative;
      // height: calc((100vh - 360px) / 2);
      height: 370px;
      background: #e9fbff;
      border-radius: 4px;
      // background: #fff;
      .right-top-content{
        padding: 20px;
        height: calc(100% - 50px);
        text-align: center;
        .right-top-ul{
          display: inline-block;
          margin-left: 10px;
          vertical-align: top;
          margin: 0;
          color: #c5c9ca;
          padding-left: 30px;
          height: calc(100% - 120px);
          width: calc(100% - ((100vh - 360px) / 2 - 90px) / 4 * 3 - 10px);
          overflow: auto;
          li{
            width: 100%;
            line-height: 2;
            span{
              display: block;
              width: 100%;
              font-size: 15px;
              white-space: nowrap;
              text-overflow: ellipsis;
              overflow: hidden;
              color: #222;
              cursor: pointer;
            }
          }
        }
        .el-carousel{
          height: 280px;
          // height: 130px;
          margin-bottom: 10px;
          // margin-left: 5%;
          // width: calc(((100vh - 360px) / 2 - 90px) / 4 * 3);
          // width: 100%;
          // width: calc(220px / 9 * 16);
          width: calc(250px / 2 * 3);
          // display: inline-block;
          .el-carousel__container{
            height: 100%;
            .shadow-block{
              position: absolute;
              height: 30px;
              background: rgba(0,0,0, 0.4);
              text-align: center;
              bottom: 0px;
              width: 100%;
              color: #fff;
              z-index: 1;
              line-height: 2;
              .shadow-text{
                width: 100%;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
              }
            }
            .el-carousel__item{
              cursor: pointer;
              img{
                width: 100%;
                height: 250px;
                // height: 100%;
                object-fit: fill;
              }
              span{
                width: 100%;
                display: inline-block;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                position: absolute;
                bottom: 0;
                left: 0;
              }
            }
          }
          .el-carousel__indicators{
            width: 100%;
            height: 25px;
            bottom: 30px;
            // text-align: center;
            .el-carousel__indicator--horizontal{
              padding: 0;
              // padding-top: 10px;
              .el-carousel__button{
                width:8px;
                height: 8px;
                border-radius: 50%;
                margin-left: 8px;
              }
            }
          }
        }
      }
    }
    .wel-right-middle{
      height: 150px;
      background: #e9fbff;
      // background: #fff;
      border-radius: 4px;
      margin-top: 15px;
      margin-bottom: 15px;
      .right-middle-content{
        overflow-x: auto;
        white-space: nowrap;
        height: 100px;
        .content-item{
          width: 25%;
          height: 60px;
          margin-top: 20px;
          margin-left: 6.5%;
          display: inline-block;
          background-size: 100% 100%;
          border-radius: 8px;
          cursor: pointer;
          a{
            display: inline-block;
            border-radius: 8px;
            width: 100%;
            height: 100%;
          }
        }
      }
    }
    .wel-right-bottom{
      position: relative;
      height: calc(100vh - 650px);
      background: #e9fbff;
      // background: #fff;
      border-radius: 4px;
      .el-tabs{
        padding: 0 20px;
        height: 100%;
        .el-tabs__header{
          margin-bottom: 0;
        }
        .el-tabs__content{
          height: calc(100% - 50px);
          overflow: auto;
        }
        .el-tabs__item{
          height: 50px;
          font-size: 16px;
          color: #666;
          line-height: 50px;
        }
        .item-list{
          height: 80px;
          cursor: pointer;
          border-bottom: 1px solid #deeaf3;
          .item-list-right{
            float: left;
            width: calc(100% - 68px);
            margin-left: 20px;
            .first-p{
              margin-top: 16px;
              color: #aaa;
              margin-bottom:0;
            }
            .second-p{
              width: 100%;
              margin: 0;
              margin-top: 5px;
              overflow: hidden;
              height: 21px;
              white-space: nowrap;
              text-overflow: ellipsis;
            }
          }
          .item-list-left{
            height: 48px;
            width:48px;
            line-height: 48px;
            text-align: center;
            margin-top: 16px;
            float: left;
            i{
              color: #fff;
              font-size: 25px;
            }
          }
        }
        .el-badge__content.is-fixed{
          top: 25px;
          right:0;
        }
      }
    }
  }
  .wrapper-item{
    float: left;
  }
}
</style>
